<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 操作菜单 -->
			<menu-popup :show="menuShow" @hideMenu="toogleMenu">
				<view class="menu">
					<view @click.stop="addFriend" hover-class="menu-hover">
						<text class="icon iconfont icon-sousuo"></text>
						<text style="font-size: 35rpx;">加糗友</text>
					</view>
					<view @click.stop="clearUnReadNum" hover-class="menu-hover">
						<text class="icon iconfont icon-qingchu"></text>
						<text style="font-size: 35rpx;">清除未读</text>
					</view>
				</view>
			</menu-popup>
			<block v-for="(item, index) in list" :key="index">
				<conversation-list :item="item"></conversation-list>
			</block>
			<graceLoading :loadingType="loadingType"></graceLoading>
		</view>
	</gracePage>
</template>
<script>
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data() {
		return {
			menuShow:false,
			list: [
				{
					userpic: '../../static/demo/userpic/19.jpg',
					username: 'JIA一勺',
					time: '13:58',
					data: '六道快手家常菜，好吃又下饭，家人都爱吃',
					unReadNum: 1
				},
				{
					userpic: '../../static/demo/userpic/5.jpg',
					username: '低头看鱼',
					time: '13:58',
					data: '六道快手家常菜，好吃又下饭，家人都爱吃',
					unReadNum: 9
				},
				{
					userpic: '../../static/demo/userpic/1.jpg',
					username: '飞屋',
					time: '13:58',
					data: '六道快手家常菜，好吃又下饭，家人都爱吃',
					unReadNum: 19
				},
				{
					userpic: '../../static/demo/userpic/8.jpg',
					username: '飞屋',
					time: '13:58',
					data: '六道快手家常菜，好吃又下饭，家人都爱吃',
					unReadNum: 0
				}
			],
			loadingType: 3,
			page: 1,
			newData:[
				{
					userpic: '../../static/demo/userpic/1.jpg',
					username: '新数据1',
					time: '13:58',
					data: '六道快手家常菜，好吃又下饭，家人都爱吃',
					unReadNum: 19
				},
				{
					userpic: '../../static/demo/userpic/8.jpg',
					username: '新数据2',
					time: '13:58',
					data: '六道快手家常菜，好吃又下饭，家人都爱吃',
					unReadNum: 0
				}
			]
		};
	},
	onPullDownRefresh() {
		this.getData();
	},
	onReachBottom() {
		// 判断加载状态避免多次滚动时有加载尚未完成
		if (this.loadingType == 2 || this.loadingType == 4) {
			return false;
		}
		this.loadMoreFunc();
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 0) {
			graceJS.navigate('../friend/friend');
		}
		if (e.index == 1) {
			this.toogleMenu();
		}
	},
	methods: {
		addFriend(){
			console.log("加糗友")
			this.hideMenu();
		},
		clearUnReadNum(){
			console.log("清除未读")
			this.hideMenu();
		},
		toogleMenu(){
			this.menuShow = !this.menuShow;
		},
		getData(){
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			}, 2000);
		},
		loadMoreFunc() {
			this.loadingType = 1;
			//追加数据(延迟1秒 模拟网络请求)
			setTimeout(() => {
				if (this.page > 3) {
					this.loadingType = 2;
					return;
				}
		
				this.list = this.list.concat(this.newData);
		
				// 页码增加
				this.page++;
				setTimeout(() => {
					this.loadingType = 3;
				}, 300);
			}, 1000);
		}
	}
};
</script>
<style lang="stylus">
	.menu
		view
			padding 20rpx
			.icon
				margin-right 15rpx
				font-weight bold
		.menu-hover
			background #EEEEEE
</style>
